<template>
  <div class="coponmodel">
    <el-dialog
      :showClose="false"
      title="新增优惠卷"
      :visible.sync="centerDialogVisible"
      height="50%"
      center
      width="1200px"
    >
      <el-form
        :inline="true"
        :label-position="labelPosition"
        ref="ruleForm"
        class="demo-ruleForm"
        :model="form"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="名称：" prop="name">
          <el-input style="width: 400px" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷数量：" prop="publishTotalNumber">
          <el-input-number
            style="width: 400px"
            v-model="form.publishTotalNumber"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="优惠卷金额：" prop="methodAmount">
          <el-input-number
            style="width: 400px"
            v-model="form.methodAmount"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="可用订单金额：" prop="useConditions">
          <el-input-number
            style="width: 400px"
            v-model="form.useConditions"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="有效开始时间：" prop="startDate">
          <el-date-picker
            style="width: 400px"
            v-model="form.startDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择有效开始时间（默认当天0点开始）"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效结束时间：" prop="endDate">
          <el-date-picker
            style="width: 400px"
            v-model="form.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择有效结束时间（默认当天23:59:59结束）"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="领取方式：" prop="type">
          <el-select
            style="width: 960px"
            v-model="form.type"
            placeholder="请选择领取方式"
          >
            <el-option label="发放券" value="1"></el-option>
            <el-option label="领取券" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠卷描述：">
          <el-input
            style="width: 960px"
            type="textarea"
            :rows="4"
            maxlength="50"
            show-word-limit
            placeholder="请输入内容"
            v-model="form.note"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelgoodesmodel">取 消</el-button>
        <el-button type="primary" @click="savegoodesmodel">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { AddCoupon } from "@/api/mallApi/managementend/coupon";
export default {
  name: "CouponAdd",
  components: {},
  props: {
    centerDialogVisible: Boolean,
    currentRow: Object,
    enterType: Number,
    cancelSubmit: Number,
  },
  data() {
    return {
      labelPosition: "right",
      form: {
        searchBeginTime: "",
        searchEndTime: "",
        pageSize: "10",
        pageNo: "1",
        orderBy: "",
        sortBy: "",
        otherParams: {
          key: {},
        },
        requestNo: "",
        spanId: "",
        token: "",
        id: 0,
        ids: [],
        mallCode: "",
        type: null,
        name: "",
        categoryId: 0,
        method: 1,
        methodAmount: null,
        note: "",
        useConditions: 0,
        limitCategory: 0,
        limitUsing: 0,
        publishTotalNumber: 0,
        limitPagesNumberPeople: 0,
        limitDateType: 1,
        validDate: 0,
        startDate: "",
        endDate: "",
        isEnabled: 0,
        createAt: "",
        updateAt: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        methodAmount: [
          {
            type: "number",
            required: true,
            message: "请输入优惠卷金额",
            trigger: "change",
          },
        ],
        startDate: [
          {
            type: "string",
            required: true,
            message: "请选择有效开始时间",
            trigger: "change",
          },
        ],
        endDate: [
          {
            type: "string",
            required: true,
            message: "请选择有效结束时间",
            trigger: "change",
          },
        ],
        type: [
          { required: true, message: "请选择领取方式", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    cancelgoodesmodel() {
      this.$emit("cancelgoodesmodel", false);
    }, // 取消按钮 传值
    savegoodesmodel(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.methodAmount >= this.form.useConditions) {
            this.$message({
              message: "优惠卷金额不能大于可用订单金额",
              type: "warning",
            });
            return;
          }
          this.form.methodAmount = this.form.methodAmount * 100;
          this.form.useConditions = this.form.useConditions * 100;
          AddCoupon(this.form)
            .then((res) => {
              console.log("新增优惠卷", res);
              if (res.code !== "00000") return;
              this.$message({
                message: "优惠卷新增成功！",
                type: "success",
              });
              this.cancelgoodesmodel();
              this.$emit("Refresh");
            })
            .catch((err) => {
              console.log(err);
              this.form.methodAmount = this.form.methodAmount / 100;
              this.form.useConditions = this.form.useConditions / 100;
            });
        } else {
          this.$message({
            message: "请补全优惠卷信息",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
  mounted() {
    // if (this.enterType === 2) {
    //   this.addgoodsinfo = this.currentRow;
    // }
  },
  created() {
    // if (this.enterType === 2) {
    //   this.addgoodsinfo = this.currentRow;
    // }
  },
  watch: {
    centerDialogVisible(newVal) {
      // 监听 centerDialogVisible 的变化
      if (!newVal) {
        // 当 centerDialogVisible 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
  },
};
</script>

<style lang="scss">
//商品添加model
.coponmodel {
  width: 100vw;
  height: 100vh;
}
</style>
